<template>
	<view>
		<up-swiper circular keyName="attractionImage" :list="swplist" @change="e => curPageNum = e.current" :autoplay="false" indicatorStyle="right:20px">
			<template #indicator>
				<view class="pageNum">
					<text>{{ curPageNum + 1 }}/{{ swplist.length }}</text>
				</view>
			</template>
		</up-swiper>
	</view>

	<view class="infomation">
		<view class="title">
			{{ info.name }}
		</view>
		<view class="price">
			<view>
				成人票售价 ￥ <text style="font-size: 1.6rem;">{{info.adultPrice}}</text> 元/人
			</view>
			<view>
				儿童票售价 ￥ <text style="font-size: 1.6rem;">{{info.childPrice}}</text> 元/人
			</view>
		</view>
		<up-line color="#a5a5a5" length="100vw" class="line"></up-line>
		<view class="warn">
			说明：{{info.description}}
		</view>
		<up-line color="#a5a5a5" length="100vw" class="line"></up-line>
	</view>

	<up-tabs :list="titles" :current="contentCur" itemStyle="width:100%;height:100rpx" @change="titleChange"></up-tabs>
	<up-line color="#a5a5a5"></up-line>
	<view class="box">
		<view v-if="contentCur === 0" class="box1">
			<view class="introduce" v-for="(item,index) in info.attractions" :key="index">
				<view class="introTitle">{{item.name}}</view>
				<image mode="widthFix" :src="item.attractionImage"></image>
			</view>			
		</view>
		<view v-if="contentCur === 1" class="box2">
			<view v-for="(item,index) in plan" :key="index">
				<text style="font-weight: bold;color: red;font-size: 1rem;">第{{item.dayNumber}}天:</text>
				<view style="margin: 25rpx 20rpx;" v-for="(item,index) in item.itineraries" :key="index">
					{{item}}
				</view>
			</view>
		</view>
		<view v-if="contentCur === 2" class="box3">
			<u-table2 align='center' :border='false' :data="self" :columns="columns"/>
		</view>
		<up-button 
			text="我要报名" 
			shape="circle"
			type="primary" 
			@click="confirm"
			style="position: fixed; bottom: 7%; left:5%; width: 90vw;">
		</up-button>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app'
	import {
		getProductById,
		getItinerariesById,
		getPricingById,
		getCarouselImages
	} from '@/api/recommend.js';
	
	const contentCur = ref(0)
	const swplist = ref([]);
	const curPageNum = ref(0);
	const info = ref({})
	const plan = ref([])
	const self = ref([])
	const columns = ref([
		{ title: '名称', key: 'itemName' },
		{ title: '价格', key: 'price' },
		{ title: '是否包含', key: 'isIncluded' }
	])
	
	const titles = ref([
		{name: '景点介绍'},
		{name: '线程安排'},
		{name: '自费景点'}
	]);
	
	onLoad(async (options) => {
		const product = await getProductById(options.id);
		info.value = product.data;
		swplist.value = [...product.data.attractions];
		console.log(product.data);
		
		const itinerary = await getItinerariesById(options.id);
		plan.value = itinerary.data;
		
		const pricing = await getPricingById(options.id);
		self.value = pricing.data;
		self.value.forEach(i => i.isIncluded = i.isIncluded ? "包含" : "不包含")
		
	})

	function titleChange(tabItem) {
		contentCur.value = tabItem.index
	}

	function confirm() {
		const data = {
			id: info.value.id,
			adultPrice: info.value.adultPrice,
			childPrice: info.value.childPrice,
		}
		uni.navigateTo({
			url:`/pages/index/enroll/index?data=${JSON.stringify(data)}`
		})
	}
	
	
</script>

<style>
	.pageNum {
		background-color: rgba(149, 149, 149, 0.7);
		color: white;
		padding: 5rpx 25rpx;
		border-radius: 20rpx;
		font-size: 0.9rem;
		text-align: center;
	}

	.title {
		font-size: 1.5rem;
		font-weight: bold;
		margin-top: 20rpx;
		word-break: break-all;
	}

	.price {
		color: red;
		font-weight: 600;
		padding-bottom: 20rpx;
	}

	.warn {
		margin: 20rpx 0;
		font-size: 0.9rem;
		padding: 0 8rpx;
	}

	.line {
		position: absolute;
		left: calc(-50vw + 50%);
	}

	.infomation {
		border-start-start-radius: 20rpx;
		border-start-end-radius: 20rpx;
		width: 90vw;
		margin: 25rpx auto;
		
	}

	.box {
		width: 94vw;
		text-align: center;
		margin: 0 auto;
		padding-bottom: 200rpx;
	}
	.box1 .introduce{
		padding: 20rpx 0;
	}
	.box1 .introduce image{
		border-radius: 10rpx;
		/* width: 300rpx; */
		text-align: left;
	}
	.box1 .introTitle{
		font-size: 1rem;
		text-align: left;
		padding: 15rpx 30rpx;
		word-break: break-all;
	}
	
	.box2{
		padding: 20rpx 0 200rpx 0;
		text-align: left;
	}
</style>